<template>
  <div class=" Hright flexC AlignItemsC flex1">
    <div class="category flex3">
      <div class=" gun_t flex JustifyContentSB AlignItemsC">
        <p class="gun_p font_s20 colorF">
          <span class="gun"></span>
          智能发现
        </p>
        <p class="font_s18 Medium subtitle textC" @click="clone.zhineng = true">智能模型</p>
      </div>
      <div class="ball_ul flexC  AlignItemsC">
        <div class="flex   font_20 colorF">
          <div>
            <p style="line-height:2.5rem;">累计发现</p>
            <p class="textC">
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">{{ creditForm.gyxy1 }}</span>
              <span class="ball font_s32">{{ creditForm.gyxy2 }}</span>
              (起)
            </p>
          </div>
          <div style="padding: 2rem;"></div>
          <div>
            <p style="line-height:2.5rem;">当月发现</p>
            <p class="textC">
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">{{ creditForm.gyxy1 }}</span>
              <span class="ball font_s32">{{ creditForm.gyxy2 }}</span>
              (起)
            </p>
          </div>
        </div>
        <div style="width:29.375rem; border:1px dashed rgba(45,125,241,0.2); margin: 1.325rem 0rem;"></div>
        <div class="flex cursor">
          <div class="flexC square JustifyContentC ">
            <p class="font_20 textC" style="color: #F29B4F;">大数据发现框</p>
            <div class="flex JustifyContentSA">
              <p class="font_s16 colorF" style="color: #FFFFFF;">本月</p>
              <p class="font_s24 textC" style="color: #FFFD58;">
                92
                <span class="font_s16 colorF">起</span>
              </p>
            </div>
            <div style="width:10.375rem; border:1px dashed rgba(242,155,79,1);margin-left: 3rem ;"></div>
            <div class="flex JustifyContentSA" @click="exception.apply = true">
              <p class="font_s16" style="color: #FFFFFF;">申请异常</p>
              <p class="font_s24" style="color: #FFFD58;">
                70
                <span class="font_s16 colorF">起</span>
              </p>
            </div>
            <div class="flex JustifyContentSA" @click="exception.serve = true">
              <p class="font_s16 " style="color: #FFFFFF;">服务异常</p>
              <p class="font_s24" style="color: #FFFD58;">
                0
                <span class="font_s16 colorF">起</span>
              </p>
            </div>
            <div class="flex JustifyContentSA" @click="exception.settlement = true">
              <p class="font_s16 " style="color: #FFFFFF;">结算异常</p>
              <p class="font_s24" style="color: #FFFD58;">
                22
                <span class="font_s16 colorF">起</span>
              </p>
            </div>
          </div>

          <div style="padding: 0.7rem;"></div>
          <div class="flexC square1 JustifyContentC ">
            <p class="font_20 textC">互联网移动端框</p>
            <div class="flex JustifyContentSA">
              <p class="font_s16">本月</p>
              <p class="font_s24 textC">
                0
                <span class="font_s16">起</span>
              </p>
            </div>
            <div style="width:10.375rem; border:1px dashed rgba(242,155,79,1);margin-left: 3rem ;"></div>
            <div class="flex JustifyContentSA">
              <p class="font_s16">签到异常</p>
              <p class="font_s24">
                0
                <span class="font_s16">起</span>
              </p>
            </div>
            <div class="flex JustifyContentSA">
              <p class="font_s16">服务次数异常</p>
              <p class="font_s24" style="margin-left: -2rem;">
                0
                <span class="font_s16">起</span>
              </p>
            </div>
            <div class="flex JustifyContentSA">
              <p class="font_s16">&nbsp;</p>
              <p class="font_s24">
                &nbsp;
                <span class="font_s16">&nbsp;</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="category flex1">
      <div class="ball_ul1 flex JustifyContentSA AlignItemsC ">
        <div class="flexC   font_20 colorF">
          <div class="flex textC">
            <div class="flexC" @click="conRightCeState = true">
              <p style="line-height:1.5rem;">信访投诉</p>
              <img src="../../assets/img/home/108.png" v-if="conRightCeState" alt="" style="width: 6rem;height: 1.125rem;" />
            </div>
            <div class="flexC" @click="conRightCeState = false">
              <p style="line-height:1.5rem; color: #A2ADBF;">两会提案</p>
              <img src="../../assets/img/home/108.png" v-if="!conRightCeState" alt="" style="width: 6rem;height: 1.125rem;" />
            </div>
          </div>
          <div class="flex   font_20 colorF" v-if="conRightCeState">
            <p class="textC" @click="clone.xingfangList = true">
              累计
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">{{ creditForm.gyxy3 }}</span>
              (起)
            </p>
            <div style="padding: 0.7rem;"></div>
            <p class="textC" @click="clone.xingfangDate = true">
              本月
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              (起)
            </p>
          </div>

          <div class="flex   font_20 colorF" v-if="!conRightCeState">
            <p class="textC" @click="clone.lianghuiList = true">
              累计
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">{{ creditForm.gyxy4 }}</span>
              (起)
            </p>
            <div style="padding: 0.7rem;"></div>
            <p class="textC" @click="clone.lianghuiDate = true">
              本月
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              <span class="ball font_s32">0</span>
              (起)
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="category flex1 flexC">
      <img
        @click="clone.fengxi = true"
        src="../../assets/img/home/105.png"
        style=" width: 32.375rem;
      height: 6.1875rem;"
        alt=""
      />
    </div>
    <Modal v-if="clone.zhineng" @hidden="hiddenClone(0)"><img src="@/assets/img/home/19.png" class="bj" /></Modal>
    <YiBaoRect02 v-if="clone.fengxi" @hidden="hiddenClone(1)" title="分析研判"><!-- <Fxyp></Fxyp> --></YiBaoRect02>
    <YiBaoPolygon v-if="clone.xingfangList" @hidden="hiddenClone(2)"><Xfts></Xfts></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.xingfangDate" @hidden="hiddenClone(3)"><XftsTwo></XftsTwo></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.lianghuiList" @hidden="hiddenClone(4)"><Lhta></Lhta></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.lianghuiDate" @hidden="hiddenClone(5)"><LhtaTow></LhtaTow></YiBaoPolygon>
    <!-- 申请异常 -->
    <YiBaoPolygon v-if="exception.apply" @hidden="hiddenException(0)"><ApplyException></ApplyException></YiBaoPolygon>
    <!--  服务异常 -->
    <YiBaoPolygon v-if="exception.serve" @hidden="hiddenException(1)"><ServeException></ServeException></YiBaoPolygon>
    <!-- 结算异常 -->
    <YiBaoPolygon v-if="exception.settlement" @hidden="hiddenException(2)"><SettlementException></SettlementException></YiBaoPolygon>
  </div>
</template>

<script>
import Modal from '@/components/Modal'

import YiBaoPolygon from '@/components/YiBaoPolygon'
import YiBaoRect02 from '@/components/YiBaoRect02'

// 申请异常
import ApplyException from './rightComponents/ApplyException'
// 服务异常
import ServeException from './rightComponents/ServeException'
// 结算异常
import SettlementException from './rightComponents/SettlementException'

import Xfts from './rightComponents/Xfts'

import XftsTwo from './rightComponents/XftsTwo'

import Lhta from './rightComponents/Lhta'

import LhtaTow from './rightComponents/LhtaTow'
// 分析研判
// import Fxyp from './rightComponents/Fxyp ';

export default {
  name: 'Hleft',
  components: {
    Modal,
    YiBaoPolygon,
    YiBaoRect02,
    Xfts,
    XftsTwo,
    Lhta,
    LhtaTow,
    // Fxyp,

    ApplyException,
    ServeException,
    SettlementException
  },
  data () {
    return {
      tempState: '1',
      isActive: 0,
      conRightCeState: true,
      clone: {
        zhineng: false,
        fengxi: false,
        xingfangList: false,
        xingfangDate: false,
        lianghuiList: false,
        lianghuiDate: false
      },
      exception: {
        apply: false,
        serve: false,
        settlement: false
      },
      creditForm: {
        gyxy1: 0,
        gyxy2: 0,
        gyxy3: 0,
        gyxy4: 0
      }
    }
  },
  mounted () {
    setInterval(() => {
      this.creditForm.gyxy1 = 0
      this.creditForm.gyxy2 = 0
      this.creditForm.gyxy3 = 0
      this.creditForm.gyxy4 = 0

      var creditInterval1 = null
      var creditInterval2 = null
      var creditInterval3 = null
      var creditInterval4 = null

      creditInterval1 = setInterval(() => {
        if (this.creditForm.gyxy1 >= 9) {
          this.creditForm.gyxy1 = 9
          clearInterval(creditInterval1)
        } else {
          this.creditForm.gyxy1 = parseInt(this.creditForm.gyxy1 + Math.ceil(9 / 10))
        }
      }, 100)

      creditInterval2 = setInterval(() => {
        if (this.creditForm.gyxy2 >= 2) {
          this.creditForm.gyxy2 = 2
          clearInterval(creditInterval2)
        } else {
          this.creditForm.gyxy2 = parseInt(this.creditForm.gyxy2 + Math.ceil(2 / 10))
        }
      }, 100)
      creditInterval3 = setInterval(() => {
        if (this.creditForm.gyxy3 >= 7) {
          this.creditForm.gyxy3 = 7
          clearInterval(creditInterval3)
        } else {
          this.creditForm.gyxy3 = parseInt(this.creditForm.gyxy3 + Math.ceil(7 / 10))
        }
      }, 100)
      creditInterval4 = setInterval(() => {
        if (this.creditForm.gyxy4 >= 1) {
          this.creditForm.gyxy4 = 1
          clearInterval(creditInterval4)
        } else {
          this.creditForm.gyxy4 = parseInt(this.creditForm.gyxy4 + Math.ceil(1 / 10))
        }
      }, 100)
    }, 5000)
  },
  methods: {
    hiddenClone (index) {
      this.isActive = index
      if (index === 0) {
        this.clone.zhineng = false
      } else if (index === 1) {
        this.clone.fengxi = false
      } else if (index === 2) {
        this.clone.xingfangList = false
      } else if (index === 3) {
        this.clone.xingfangDate = false
      } else if (index === 4) {
        this.clone.lianghuiList = false
      } else if (index === 5) {
        this.clone.lianghuiDate = false
      }
    },
    hiddenException (index) {
      this.isActive = index
      if (index === 0) {
        this.exception.apply = false
      } else if (index === 1) {
        this.exception.serve = false
      } else if (index === 2) {
        this.exception.settlement = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Hright {
  .bj {
    width: 95%;
    height: 90%;
    position: absolute;
    top: 4%;
    left: 3%;
  }
  .category {
    margin-top: 1.0625rem;
    .subtitle {
      width: 7.75rem;
      height: 1.875rem;
      background: url(../../assets/img/home/008.png) no-repeat;
      background-size: 100% 100%;
      color: #0a1943;
      font-weight: bold;
      line-height: 2rem;
    }
    .gun {
      width: 0.25rem;
      height: 1.25rem;
      margin: 0.35rem 0.8rem 0rem 0.8rem;
      background: rgba(255, 255, 255, 1);
      display: inline-block;
    }
    .gun_t {
      width: 32.375rem;
      height: 2rem;
      line-height: 2.5rem;
      background: linear-gradient(90deg, rgba(45, 125, 241, 0.6) 0%, rgba(45, 125, 241, 0.25) 100%);
    }
    .gun_p {
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 2rem;
      text-shadow: 0.4375rem 0.4375rem 0.25rem rgba(0, 0, 0, 1);
    }
    .ball_ul {
      width: 32.375rem;
      height: 22.375rem;
      font-weight: 400;
      background: url(../../assets/img/home/109.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball_ul1 {
      width: 32.375rem;
      height: 7.1875rem;
      font-weight: 400;
      background: url(../../assets/img/home/200.png) no-repeat;
      background-size: 100% 100%;
    }

    .ball {
      display: inline-block;
      width: 1.875rem;
      height: 3.125rem;
      color: #f8d371;
      border: 1px solid rgba(241, 145, 73, 1);
      margin-right: 0.5rem;
    }

    .square {
      width: 14.375rem;
      height: 11.75rem;
      background: url(../../assets/img/home/106.png) no-repeat;
      background-size: 100% 100%;
    }
    .square p,
    .square1 p {
      line-height: 2.1rem;
      padding-left: 2rem;
      color: rgba(162, 173, 191, 0.7);
    }
    .square1 {
      width: 14.375rem;
      height: 11.75rem;
      background: url(../../assets/img/home/107.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
